import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { routes } from '../../routes';

interface IconProps {
  style?: React.CSSProperties;
}

const Home: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>欢迎使用PDF工具箱</h1>
      <Row gutter={[16, 16]}>
        {routes.filter(route => route.path !== '/').map(route => (
          <Col xs={24} sm={12} md={8} key={route.path}>
            <Card
              hoverable
              style={{ height: '100%' }}
              actions={[
                <Button type="primary" onClick={() => navigate(route.path)}>
                  立即使用
                </Button>
              ]}
            >
              <Card.Meta
                avatar={React.cloneElement(route.icon, { 
                  style: { fontSize: 24 } 
                } as IconProps)}
                title={route.name}
                description={getFeatureDescription(route.path)}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

const getFeatureDescription = (path: string): string => {
  switch (path) {
    case '/ocr':
      return '智能识别PDF和图片中的文字，支持中英文';
    case '/convert':
      return '将PDF转换为Word或PPT格式，保持原有格式';
    case '/merge':
      return '合并多个PDF文件，快速整合文档';
    case '/split':
      return '按需拆分PDF页面，灵活管理文档';
    default:
      return '';
  }
};

export default Home; 